<template lang="pug">
  div
    .libaryWrapper(v-if="$route.path === '/educational/courseManage/source' || $route.path === '/teacherResource/training/source'")
      el-row(:gutter="20")
        el-col(:span="16")
          form-box(
            ref="filterForm"
            :fields="searchConfig"
            :isFilter="true"
            :submitting="searching"
            :submitHandle="searchHandle"
          )
        el-col.tr(:span="8")
          <!--el-button(size="large" round @click="deleteHandle()") 删除-->
          el-button.gradientVertical(size="large" round @click="addHandle()") 添加
          el-button.btn-primary-box(size="large" round @click="myVisible = true") 我的素材
      div(v-loading="loading")
        el-checkbox-group(v-model="chosedIds")
          el-row(:gutter="30" v-if="list.length > 0")
            el-col(v-for="(course, index) in list" :md="8" :lg="6" :key="course.id")
              item(:detail="course" @getList="values => getList({...values, pageNum: 0})")
        i-pagination(
          v-bind="pagination"
          @pagination="values => getList({ ...values, ...filterData })"
        )
        empty(v-if="list.length === 0")
      add-drawer(:visible.sync="addObj.visible" :id="addObj.id" :type="addObj.type" @getList="values => getList({...values, ...filterData, pageNum: 0})" :dirType="dirType")
      my-drawer(:visible.sync="myVisible" :dirType="dirType")
    router-view(v-else)
</template>
<script>
import { mapGetters } from 'vuex'
import { getDocList, docSubmit, getDirList } from './api'
import IPagination from '@/components/Basic/Pagination'
import AddDrawer from './components/addDrawer'
import Item from './components/item'
import MyDrawer from './components/myDrawer'

export default {
  components: {
    IPagination,
    AddDrawer,
    Item,
    MyDrawer
  },
  data () {
    return {
      loading: false,
      searching: false,
      list: [],
      chosedIds: [], // 已选择id数组
      pagination: {
        total: 0,
        pageSize: 12,
        pageNum: 0
      },
      filterData: {
        dirId: ''
      },
      addObj: {
        visible: false,
        id: '',
        type: ''
      },
      myVisible: false,
      dirType: 1,

      dirList: []
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
        {
          label: '请选择素材类型',
          key: 'dirId',
          type: 'select',
          initialValue: this.filterData.dirId,
          fieldProps: {
            options: this.dirList,
            props: { value: 'id', label: 'title' }
          },
          events: {
            change: val => this.change(val)
          }
        },
        {
          key: 'title',
          label: '素材名称'
        }
      ]
    }
  },
  created () {
    const path = this.$route.path
    console.log(path)
    if (path === '/educational/courseManage/source') {
      this.dirType = 1
    } else if (path === '/teacherResource/training/source') {
      this.dirType = 1
    } else {
      this.dirType = 0
    }
    this.getDirList()
  },
  methods: {
    // 获取目录
    getDirList () {
      getDirList({ type: this.dirType, pageNum: 0, pageSize: 999 }).then(res => {
        this.dirList = res.content || []
        this.filterData.dirId = this.dirList[0]?.id || ''
        this.change(this.filterData.dirId)
      })
    },
    change (values) {
      this.filterData.dirId = values
      this.getList({
        dirId: values,
        pageNum: 0
      })
    },
    searchHandle (values) {
      this.filterData = values
      console.log(this.filterData)
      this.getList({
        ...values,
        pageNum: 0
      })
    },
    getList (values) {
      const { curArea, pagination } = this
      const { pageSize, pageNum } = pagination
      console.log(values)
      console.log(pagination)
      this.loading = true
      getDocList({ dirType: this.dirType, areaId: curArea.areaId, pageSize, pageNum, ...values }).then(res => {
        console.log(res)
        this.pagination = {
          total: res.totalElements,
          pageNum: res.number,
          pageSize: pageSize
        }
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    },
    addHandle (id = '', type = 'add') {
      this.addObj = {
        visible: true,
        id,
        type
      }
    },
    deleteHandle () {
      const { chosedIds } = this
      docSubmit({ ids: chosedIds.join() }, 'delete').then(() => {
        this.$message.success('删除成功')
        this.getList()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.courseItem{
  width: 100%;
  display: block;
  position: relative;

  ::v-deep{
    > .el-checkbox__input{
      position: absolute;
      right: 10px;
      top: 10px
    }

    > .el-checkbox__label{
      display: block;
      width: 100%
    }
  }
}
</style>
